<@override name="content">
<div class="row">
  <div class="span4">
    <h4>Statistics</h4>
    <table id="problem-statistics" class="table table-hover table-condensed table-bordered">
      <tbody>
        <tr>
          <td>Total Submissions</td>
          <td><a href="status?pid=${problem.pid!}">${problem.submission!}</a></td>
        </tr>
        <tr>
          <td>Users (Submitted)</td>
          <td>${problem.submitUser}</td>
        </tr>
        <tr>
          <td>Users (Solved)</td>
          <td>${problem.solved}</td>
        </tr>
        <#if resultList??>
        <#list resultList as Result>
        <tr>
          <td id="${Result.name!}">${Result.longName!}</td>
          <td><a href="status?pid=${problem.pid!}&result=${Result.result!}">${Result.count!}</a></td>
        </tr>
        </#list>
        </#if>
      </tbody>
    </table>
    <div id="container" style="min-width: 350px; height: 350px; margin: 0 auto"></div>
  </div>

  <div class="span8" id="ajax-container">
    <h4>
      Best solutions of Problem <a href="problem/show/${problem.pid!}" data-toggle="tooltip" title="${problem.title!}">${problem.pid!}</a>
    </h4>
    <div id="lang" class="pull-left btn-group ajax-loader">
      <a class="btn btn-info ajax-loader" type="a" data-pid="${problem.pid}" data-id="0">All</a> 
      <#if program_languages??>
      <#list program_languages.keySet() as key> 
        <a class="btn btn-info ajax-loader" type="a" data-pid="${problem.pid}" data-id="${key}">${program_languages.get(key)!}</a>
      </#list>
      </#if>
    </div>
    <div class="pull-right">
      <span id="pages" class="badge badge-info"></span>
      <span id="records" class="badge badge-info"></span>
    </div>
    <table id="problem-status" class="table table-hover table-condensed">
      <thead>
        <tr>
          <th>Rank</th>
          <th>Run ID</th>
          <th>User</th>
          <th>Time</th>
          <th>Memory</th>
          <th>Language</th>
          <th>Code Length</th>
          <th>Submit Time</th>
        </tr>
      </thead>
      <tbody id="problem-status-tbody">
      </tbody>
    </table>
    <div id="page" class="pagination pagination-centered ajax-loader"></div>
  </div>
</div>

<table class="hidden">
  <tbody id="problem-status-row">
    <tr>
      <td class="id">[id]</td>
      <td class="sid">[sid]</td>
      <td class="user"><a href="user/profile/[name]">[name]</a></td>
      <td class="time">[time] MS</td>
      <td class="memory">[memory] KB</td>
      <td class="language">[language]</td>
      <td class="codeLen">[len] B</td>
      <td class="ctime">[ctime]</td>
    </tr>
  </tbody>
</table>
</@override>

<@override name="scripts">
  <#if oj_style != "slate">
  <link rel="stylesheet" href="assets/tablecloth/css/tablecloth.css" type="text/css">
  <script src="assets/tablecloth/js/jquery.metadata.js"></script>
  <script src="assets/tablecloth/js/jquery.tablesorter.min.js"></script>
  <script src="assets/tablecloth/js/jquery.tablecloth.js"></script>
  </#if>
  <#if (problem.submission>0)>
  <script src="assets/Highcharts/js/highcharts.js"></script>
  <script src="assets/Highcharts/js/modules/exporting.js"></script>
  </#if>
  <script type="text/javascript">
    'use strict';
      $(document).ready(function () {
        var chart;

        var prevpage="${baseUrl}/problem/status/${prevPid!}"
        var nextpage="${baseUrl}/problem/status/${nextPid!}"
        $(document).keydown(function(event) {
          <#if prevPid!=problem.pid>if(event.keyCode==37)window.location=prevpage;</#if>
          <#if nextPid!=problem.pid>if(event.keyCode==39)window.location=nextpage;</#if>
        });
        
        <#if (problem.submission>0)>
        // Build the chart
        $('#container').highcharts({
            chart: {
              plotBackgroundColor: null,
              plotBorderWidth: null,
              plotShadow: false
            },
            title: {
              text: '<a href="${baseUrl!}/problem/show/${problem.pid!}" title="view the problem">Problem ${problem.pid!} Statistics</a>'
            },
            subtitle: {
              text: 'Power OJ'
            },
            tooltip: {
               
            },
            plotOptions: {
              pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                  enabled: false
                },
                showInLegend: true
              }
            },
            series: [{
              type: 'pie',
              name: 'Count',
              data: [
                <#if resultList??>
                <#list resultList as Result>
                {
                  name: '${Result.longName!}',
                  color: $('td#${Result.name!}').css('color'),
                  y: ${Result.count!}
                },
                </#list>
                </#if>
              ]
          }]
      });
      </#if>
    });
  </script>

  <script type="text/javascript">
    $(document).ready(function () {
      function problemStatus(url) {
        $.getJSON(url, function(data){
          var html = '';
          var temp = $('#problem-status-row').html();
          var solutionList = data.solutionList;
          var pageNumber = parseInt(solutionList.pageNumber);
          var pageSize = parseInt(solutionList.pageSize);
          var pSize = parseInt(pageSize);
          var totalPage = parseInt(solutionList.totalPage);
          for(var i in solutionList.list) {
            var solution = data.solutionList.list[i];
            var language = solution.language;
            if (data.user && data.user.uid && (data.adminUser || data.user.uid==solution.uid))
              language = '<a href="code/' + solution.sid + '" target="_blank" title="show source code">' + solution.language + '</a>';
            
            html += temp.replace(/\[id\]/g, (parseInt(i)+1+(pageNumber-1)*pageSize))
                    .replace(/\[sid\]/g, solution.sid)
                    .replace(/\[name\]/g, solution.name || "Guest")
                    .replace(/\[time\]/g, solution.time || 0)
                    .replace(/\[memory\]/g, solution.memory || 0)
                    .replace(/\[language\]/g, language)
                    .replace(/\[len\]/g, solution.codeLen)
                    .replace(/\[ctime\]/g, parseTimestamp(solution.ctime));
          }
          
          $('#problem-status-tbody').html(html);
          $('span#pages').html(pageNumber + '/' + totalPage + ' Pages');
          $('span#records').html(solutionList.totalRow + ' Records');
          $('a.ajax-loader').removeClass('active');
          var language = data.language==null ? '' : data.language;
          $('a.ajax-loader[data-id='+language+']').addClass('active');
          $('div#page').html(makeProblemStatusPage(pageNumber, totalPage));
        });
      }

      function makeProblemStatusPage(pageNumber, totalPage)
      {
        var prev = '';
        var html = '';
        if (pageNumber > 1)
        {
          prev = '<li><a class="btn-link" data-page="' + (pageNumber-1) + '">Prev</a></li>';
        }
        var next = '';
        if (pageNumber < totalPage)
        {
          next = '<li><a class="btn-link" data-page="' + (pageNumber+1) + '">Next</a></li>';
        }

        html = '<ul><li class="' + (pageNumber==1?'disabled':'') + '"><a class="btn-link" data-page="1">&lt;&lt;</a></li>' + prev;

        var start = pageNumber-3;
        var end = pageNumber+3;
        if (start < 1)
        {
          end = end-start+1;
          start = 1;
        }
        if (end > totalPage)
        {
          start=start-(end-totalPage)-1;
          if (start < 1)
            start = 1;
          end = totalPage;
        }
        if (end < start)
          end = start;
          
        for(i=start; i<=end; ++i)
        {
          html += '<li class="' + (pageNumber==i?'disabled':'') + '"><a class="btn-link" data-page="' + i + '">' + i + '</a></li>';
        }

        html += next + '<li class="' + (pageNumber>=totalPage?'disabled':'') + '"><a class="btn-link" data-page="' + totalPage + '">&gt;&gt;</a></li></ul>';
        return html;
      }
      
      $('div.ajax-loader').delegate('a', 'click', function() {
        if ($(this).parent().hasClass('disabled'))
          return;

        var lang = $(this).attr('data-id') || $('.ajax-loader.active').attr('data-id') || '';
        var page = $(this).attr('data-page') || 1;

        var url = 'api/problem/status/${problem.pid!}?language=' + lang + '&p=' + page;
        problemStatus(url);
      });
      
      var url = 'api/problem/status/${problem.pid!}';
      problemStatus(url);
      
      <#if oj_style != "slate">
      $("table#problem-status, table#problem-statistics").tablecloth({
        theme:"stats",
        condensed:true,
        sortable:false,
        striped:true,
        clean:true
      });
      </#if>
    });
  </script>
</@override>
<@extends name="../common/_layout.html" />
